<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>dojox.Grid with Dojo.Data via binding</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
	<style type="text/css">
		@import "../_grid/Grid.css";
		body {
			font-size: 1em;
			font-family: Geneva, Arial, Helvetica, sans-serif;
		}
		
		#grid {
			width: 65em;
			height: 25em;
			padding: 1px;
		}
	</style>
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:false, parseOnLoad: true"></script>
<script type="text/javascript">
	dojo.require("dojo.data.ItemFileReadStore");
	dojo.require("dojox.data.CsvStore");
	/*dojo.require("dojox.grid.Grid");
	dojo.require("dojox.grid._data.model");
	dojo.require("dojo.parser");*/
</script>
<!-- Debugging -->
<script type="text/javascript" src="../_grid/lib.js"></script>
<script type="text/javascript" src="../_grid/drag.js"></script>
<script type="text/javascript" src="../_grid/scroller.js"></script>
<script type="text/javascript" src="../_grid/builder.js"></script>
<script type="text/javascript" src="../_grid/cell.js"></script>
<script type="text/javascript" src="../_grid/layout.js"></script>
<script type="text/javascript" src="../_grid/rows.js"></script>
<script type="text/javascript" src="../_grid/focus.js"></script>
<script type="text/javascript" src="../_grid/selection.js"></script>
<script type="text/javascript" src="../_grid/edit.js"></script>
<script type="text/javascript" src="../_grid/view.js"></script>
<script type="text/javascript" src="../_grid/views.js"></script>
<script type="text/javascript" src="../_grid/rowbar.js"></script>
<script type="text/javascript" src="../_grid/publicEvents.js"></script>
<script type="text/javascript" src="../VirtualGrid.js"></script>
<script type="text/javascript" src="../_data/fields.js"></script>
<script type="text/javascript" src="../_data/model.js"></script>
<script type="text/javascript" src="../_data/editors.js"></script>
<script type="text/javascript" src="../Grid.js"></script>
<script type="text/javascript">
	dojox.grid.data.HashMixin = {
		getFieldName: function(inIndex){
			var n = this.fields.get(inIndex);
			return (n)&&(n.name);
		},
		_get: function(inRowIndex, inColIndex){
			var row = this.data[inRowIndex];
			var n = this.getFieldName(inColIndex);
			return (inColIndex == undefined || !n ? row : row[n]);
		},
		getDatum: function(inRowIndex, inColIndex){
			return this._get(inRowIndex, inColIndex);
		},
		getRow: function(inRowIndex){
			return this._get(inRowIndex);
		},
		setDatum: function(inDatum, inRowIndex, inColIndex){
			var n = this.getFieldName(inColIndex);
			if(n){
				this.data[inRowIndex][n] = inDatum;
			}
		},
		// get items based on field names
		createComparator: function(inField, inIndex, inSubCompare){
			return function(a, b){ 
				var c = inField.name;
				var ineq = inField.compare(a[c], b[c]);
				return (ineq ? (inIndex > 0 ? ineq : -ineq) : (inSubCompare && inSubCompare(a, b)));
			}
		},
		makeComparator: function(inIndices){
			var result = null;
			for(var i=inIndices.length-1, col; i>=0; i--){
				col = Math.abs(inIndices[i]) - 1;
				if(col >= 0){
					result = this.createComparator(this.fields.get(col), inIndices[i], result);
				}
			}
			return result;
		}
	}

	dojo.declare("dojox.grid.data.Itemhash", dojox.grid.data.table, dojox.grid.data.HashMixin);

	function getRow(inRowIndex){
		return ' ' + inRowIndex;
	}
	
	var layout2 = [
		{ type: 'dojox.GridRowView', width: '20px' },
		{ cells: [[{ name: "Row", get: getRow, width: 5}]], noscroll: true},
		{ cells: [[
			{ name: "Title", field: 0 },
			{ name: "Year", field: 1, width: 20 },
			{ name: "Producer", field: 2, width: 'auto' }
		]]}
	];
	
	updateGrid = function(inItems, inResult){
		//var m = new dojox.grid.data.table(null, csvStore._dataArray);
		var m = new dojox.grid.data.Itemhash();
		var f = csvStore.getAttributes(inItems[0]);
		var i = 0;
		var fields = [];
		dojo.forEach(f, function(a) {
			fields.push({name: a});
		});
		m.fields.set(fields);
		model = m;
		dojo.forEach(inItems, function(item) {
			var row = {};
			dojo.forEach(fields, function(a) {
				row[a.name] = csvStore.getValue(item, a.name)||"";
			});
			m.setRow(row, i++);
		});
		grid.setModel(m);
	}
	
	
	dojo.addOnLoad(function(){
		csvStore = new dojox.data.CsvStore({url:"support/movies.csv"});
		csvStore.fetch({ onComplete: updateGrid, onError: function() { console.log(arguments)}});
	});
</script>
</head>
<body>
<h5>dojox.Grid using Dojo.Data stores via simple binding</h5>
<div jsId="grid" dojoType="dojox.Grid" 
	elasticView="2" structure="layout2"></div>
</body>
</html>
